<!DOCTYPE HTML>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <title>Hello APP</title>
    <link rel="stylesheet" type="text/css" href="../css/aui.css" />

	<style>

	</style>
</head>
<body>
    <section class="aui-content">
      <ul class="aui-list aui-media-list aui-margin-b-10 aui-margin-t-10">
          <li class="aui-list-item aui-list-item-middle" onclick="openActionsheet();">
              <div class="aui-media-list-item-inner">
                  <div class="aui-list-item-inner">
                      头像
                  </div>
                  <div class="aui-list-item-media" style="width: 3rem;" id="img_id">
                      <img src="../image/liulangnan.png" class="aui-img-round aui-list-img-sm">
                  </div>
              </div>
          </li>
      </ul>

      <ul class="aui-list aui-list-in">
            <li class="aui-list-item" onclick="openDialog('cn_name')">
                <div class="aui-list-item-inner aui-list-item-arrow">
                    <div class="aui-list-item-title">姓名</div>
                    <div class="aui-list-item-right" id="cn_name_id">

                    </div>
                </div>
            </li>
            <li class="aui-list-item">
                <div class="aui-list-item-inner">
                    <div class="aui-list-item-title">账号</div>
                    <div class="aui-list-item-right" id="username_id"></div>
                </div>
            </li>
            <!--<li class="aui-list-item">
                <div class="aui-list-item-inner">
                    <div class="aui-list-item-title">角色</div>
                    <div class="aui-list-item-right" id="role_id"></div>
                </div>
            </li>-->
            <li class="aui-list-item" onclick="openDialog('phone')">
                <div class="aui-list-item-inner aui-list-item-arrow">
                    <div class="aui-list-item-title" >手机号</div>
                    <div class="aui-list-item-right" id="phone_id">

                    </div>
                </div>
            </li>
        </ul>
    </section>
</body>
<script type="text/javascript" src="../script/zepto.min.js" ></script>
<script type="text/javascript" src="../script/api.js"></script>
<script type="text/javascript" src="../script/aui-actionsheet.js" ></script>
<script type="text/javascript" src="../script/aui-dialog.js" ></script>
<script type="text/javascript">
    var dialog = new auiDialog();
    apiready = function(){
        api.parseTapmode();
        $("#cn_name_id").html($api.getStorage("cn_name"));
        $("#username_id").html($api.getStorage("username"));
        $("#phone_id").html($api.getStorage("phone"));
        var html = '<img src="http://101.37.91.134/include/data/headImg/'+$api.getStorage("user_img")+'" class="aui-img-round aui-list-img-sm">'
        $("#img_id").html(html);
    };

    var actionsheet = new auiActionsheet();
    //打开底部弹窗
    function openActionsheet(){
        actionsheet.init({
            frameBounces:true,//当前页面是否弹动，（主要针对安卓端）
            title:"更换头像",
            cancelTitle:'取消',
            //destructiveTitle:'红色警告按钮',
            buttons:['拍照','图库选择']
        },function(ret){
            if(ret){
                if(ret.buttonIndex=="1"){
                    getPic("camera");
                }else {
                    getPic("library");
                }
            }
        })
    }

    //选择图片
    function getPic(type){
        api.getPicture({
            sourceType: type,
            encodingType: 'jpg',
            mediaValue: 'pic',
            destinationType: 'url',
            allowEdit: true,
            quality: 100,
            targetWidth: 300,
            targetHeight: 300,
            saveToPhotoAlbum: false
        }, function(ret, err) {
            if (ret) {
                var username = $api.getStorage('username');
                api.ajax({
                    url: ServeUrl + "m=Index&a=updateUserInfo",
                    method: 'post',
                    data: {
                        values: {
                            username:username
                        },
                        files: {
                            file: ret.data,
                        }
                    }
                }, function(ret, err) {
                    //alert(JSON.stringify(ret));
                    if(ret.data.status==1){
                        var html = ''
                        html+='<img src="'+ret.data.user_img+'" class="aui-img-round aui-list-img-sm">';
                        $("#img_id").html(html);
                        $api.setStorage('user_img', ret.data.user_img);
                        api.sendEvent({
                            name:'userInfoReload',
                        })
                    }
                });

            } else {
                alert(JSON.stringify(err));
            }
        });
    }

    function openDialog(type){
        dialog.prompt({
            title:"修改账号信息",
            text:'请输入信息',
            type:'number',
            buttons:['取消','确定']
        },function(ret){
            if(ret.buttonIndex == 2){
                var username = $api.getStorage('username');
                var text = ret.text;
                api.ajax({
                    url: ServeUrl + "m=Index&a=updateUserInfo",
                    method: 'post',
                    data: {
                        values: {
                            text: ret.text,
                            username:username,
                            type:type
                        }
                    }
                }, function(ret, err) {
                    //alert(JSON.stringify(ret));
                    if(ret.data.phone){
                        $api.setStorage('phone', ret.data.phone);
                    }
                    if(ret.data.cn_name){
                        $api.setStorage('cn_name', ret.data.cn_name);
                    }
                    api.sendEvent({
                        name:'userInfoReload',
                    })

                });
            }
        })
    }
</script>
</html>
